<template>
    <el-card class="introduce text-center">
        

        <div class="introduce__upload">
            <img-cropper-upload v-model="form.img" :config="logoConfig" class="w-full">
                <div class="active relative" v-if="form.img">
                    <img :src="form.img" style="width:150px;height:150px;border-radius: 50%;">
                    <span class="delete-icon">
                        <i class="el-icon-error" @click.stop="form.img = ''"></i>
                    </span>
                </div>
                <div class="logo text-center" v-else>
                    <div>上传
                        <br/>企业头像/LOGO</div>
                </div>
            </img-cropper-upload>
        </div>

        <div class="introduce__upload">
            <img-cropper-upload v-model="form.background" :config="{width: 900}" class="w-full">
                <div class="active relative" v-if="form.background">
                    <img :src="form.background" style="max-height: 250px;">
                    <span class="delete-icon">
                        <i class="el-icon-error" @click.stop="form.background = ''"></i>
                    </span>
                </div>
                <div class="default text-center" v-else>
                    <i class="iconfont icon-camera"></i>
                    <div>请添加封面图片
                        <br/>建议尺寸：900像素*500像素</div>
                </div>
            </img-cropper-upload>
        </div>

        <el-form label-width="80px" label-position="left" :class="introduce.length < 2 ? 'px-0' : 'pd'" class="w-1/2 inline-block introduce-edit__item">
            <el-form-item label="企业地址">
                <el-input v-model="form.address" placeholder="请输入企业地址"></el-input>
            </el-form-item>

            <el-form-item label="企业官网">
                <el-input v-model="form.url" placeholder="请输入企业官网"></el-input>
            </el-form-item>

            <el-form-item label="联系方式">
                <el-input v-model="form.contactWay" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <el-form-item label="企业介绍">
                <el-input type="textarea" rows="10" v-model="form.introduction" placeholder="请输入企业介绍"></el-input>
            </el-form-item>
        </el-form>

        <!-- 富文本 -->
        <!-- <tinymce v-model="form.introduction" :config="{}"></tinymce> -->

        <div class="flex justify-between items-center introduce__control" :class="[isCollapse ? 'is-collaspe' : 'no-collaspe']">
            <div style="margin:auto;">
                <el-button class="btn-primary" @click="postData()">保存</el-button>
                <el-button type="info" @click="$router.go(-1)">取消</el-button>
            </div>
        </div>
    </el-card>
</template>

<script>
    import Tinymce from '../../components/base/Tinymce';
    import Preview from '../../components/widget/Preview';
    import Channel from '../../components/widget/Channel';
    import FileUpload from '../../components/base/FileUpload';
    import ImgCropperUpload from '../../components/base/ImgCropperUpload';
    import {
        Cascader,
        Checkbox,
        Select,
        Form,
        FormItem
    } from 'element-ui';
    import {
        getCategorise
    } from '../../config/Cache';
    import debounce from 'lodash/debounce';

    export default {
        components: {
            Tinymce,
            Preview,
            Channel,
            FileUpload,
            ImgCropperUpload,
            ElSelect: Select,
            ElCascader: Cascader,
            ElCheckbox: Checkbox,
            ElForm: Form,
            ElFormItem: FormItem,
        },
        data() {
            return {
                logoConfig:{
                    info: true,
                    size: 1,
                    outputType: 'jpeg',
                    canScale: true,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 300,
                    autoCropHeight: 300,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [1, 1]
                },
                form: null,
                introduce: [],
                isCollapse: document.body.clientWidth < 1024,
            };
        },
        watch: {
            '$route' (val, oldVal) {
                this.createForm();
            }
        },
        computed: {
            titleText() {
                return (this.$route.params.id || this.form.id) ? '编辑' : '发布';
            },
        },
        methods: {
            createForm() {
                this.form = {
                    background: '', //大图片
                    address: '', //企业地址
                    url: "", //企业官网
                    contactWay: '', //联系方式
                    introduction: '', //富文本信息
                };
            },
            // async fetchCategory() {
            //     const categories = await getCategorise('cascader');
            //     console.log(categories)
            //     this.category = categories
            //     this.typeOptions = categories.map(el => {
            //         if (!el.nodes) el.disabled = true;
            //         return el;
            //     });
            //     this.options = await getCategorise();
            //     console.log(this.options,'..this.options')
            // },
            postData() {
                console.log(this.form, 'form,,,,,,,,')
                // if (!this.form.introduction.includes('<!DOCTYPE html>')) {
                //     this.form.introduction = '<!DOCTYPE html>' +
                //         '<html>' +
                //         '<head>' +
                //         '<meta charset=utf-8>' +
                //         '<meta http-equiv=X-UA-Compatible content="IE=edge">' +
                //         '<meta name="viewport" content="width=device-width, ' +
                //         'initial-scale=1,maximum-scale=1, user-scalable=no">' +
                //         '<meta http-equiv=Content-Type content="text/html; charset=UTF-8">' +
                //         '<title></title>' +
                //         '<style type="text/css">' +
                //         '* { font-size: 16px;}' +
                //         'body {line-height: 1.5; font-size: 16px; font-family: -apple-system,SF UI Text,Arial,' +
                //         'Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; color: #2f2f2f; }' +
                //         'p, div {line-height: 1.7; text-align: justify;}' +
                //         'p {margin: 0 0 20px; padding-left: 10px; padding-right: 10px;}' +
                //         'iframe { width: 100%;}' +
                //         '</style>' +
                //         '</head><body>' +
                //         this.form.introduction +
                //         '</body></html>'
                // }

                // const regexp = /(<!DOCTYPE html>.*<\/head>)|(<.*?>)/g;
                // this.form.intro = this.form.introduction
                //     .replace(regexp, '')
                //     .replace(/^((&nbsp;)|(&ldquo;)|(&rdquo;)|(\n)|(\s)|(↵))*/g, '')
                //     .slice(0, 100) + '...';


                let url = 'user/company/edit';
                API.post(url, this.form).then(res => {
                    const regexp = /(<!DOCTYPE html>.*<\/head>)/g;
                    this.form.introduction = this.form.introduction.replace(regexp, '');
                    Ele.$message.success('保存成功');
                    this.getDetail()
                });
            },
            getDetail() {
                var url = 'user/company/profile';
                API.get(url).then(res => {
                    this.form = {
                        background: res.background, //大图片
                        address: res.address, //企业地址
                        url: res.url, //企业官网
                        contactWay: res.contactWay, //联系方式
                        introduction: res.introduction, //富文本信息
                        img : res.logo,  //企业logo
                    };
                })
            },
        },
        mounted() {},
        created() {
            this.createForm();
            this.getDetail()
        },
        beforeRouteEnter(to, from, next) {
            
            next(vm => {
                
                // vm.fetchCategory();
            });
        }
    };

</script>

<style lang="scss">
    .introduce {
        .el-card__body {
            padding-bottom: 80px;
        }

        header {
            color: #333;
            font-size: 20px;
        }

        &__upload {
            max-height: 250px;
            margin: 18px auto 12px;

            .default {
                color: #999;
                height: 150px;
                font-size: 14px;
                padding-top: 30px;
                background-color: #ececec;

                .iconfont {
                    font-size: 40px;
                }
            }

            .logo {
                color: #999;
                height: 150px;
                width: 150px;
                border-radius: 50%;
                font-size: 14px;
                padding-top: 54px;
                background-color: #ececec;
                margin:  0 auto;
                .iconfont {
                    font-size: 40px;
                }
            }

            .active {
                // height: 500px;
                text-align: center;

                .delete-icon {
                    position: absolute;
                    right: -15px;
                    top: -12px;
                    background: #fff;
                    border-radius: 50%;

                    .el-icon-error {
                        color: #666;
                        font-size: 30px;
                    }
                }
            }
        }
        .el-input__inner {
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid #f0f0f0;
        }
        &__item {
            &.pd {
                padding: 20px 40px;
                vertical-align: top;
            }
        }


        &__control {
            position: fixed;
            bottom: 21px;
            background: #fff;
            padding: 1rem;
            transition: all .6s;

            &.is-collaspe {
                width: calc(100% - 130px);
                left: 110px;
            }

            &.no-collaspe {
                width: calc(100% - 330px);
                left: 300px;
            }
        }
    }

</style>
